$.get('http://127.0.0.1:5000/line').then(res => {
    const myChart = echarts.init(document.getElementById('line'))
    const option = {
        title: {
            text: '2023年各月出版图书趋势',
            left: 'center'
        },
        tooltip: {},
        xAxis: {
            type: 'category',
            data: res.label,
            axisLabel: {
                rotate: 45
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: res.data,
                type: 'line',
                smooth: true
            }
        ]
    };
    myChart.setOption(option)
})
$.get('http://127.0.0.1:5000/bar').then(res => {
    const myChart = echarts.init(document.getElementById('bar'))
    const option = {
        title: {
            text: '图书评论数TOP10',
            left: 'center'
        },
        tooltip: {},
        xAxis: {
            type: 'category',
            data: res.label
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: res.data,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    };
    myChart.setOption(option)
})
$.get('http://127.0.0.1:5000/pie').then(res => {
    const myChart = echarts.init(document.getElementById('pie'))
    const option = {
        title: {
            text: '不同折扣段占比',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom:0
        },
        series: [
            {
                name: '折扣段',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: res.data
            }
        ]
    };
    myChart.setOption(option)
})
$.get('http://127.0.0.1:5000/radar').then(res => {
    const myChart = echarts.init(document.getElementById('radar'))
    const option = {
        title: {
            text: '图书的原价、折后价与折扣雷达图',
            left: 'center'
        },
        tooltip: {},
        legend: {
            data: res.legend.map(value => value + ''),
            selectedMode: 'single',
            type: 'scroll',
            bottom: 0
        },
        radar: {
            shape: 'circle',
            indicator: res.max
        },
        series: res.data.map((item, index) => {
            return {
                name: index + 1 + '',
                type: 'radar',
                data: item
            }
        })
    };
    myChart.setOption(option)
})

$.get('http://127.0.0.1:5000/word_cloud').then(res => {
    const myChart = echarts.init(document.getElementById('word_cloud'))
    const option = {
        title:{
            text:'各出版社图书数量TOP50词云图',
            left:'center'
        },
        tooltip: {},
        series: [{
            type: 'wordCloud',
            // shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
            shape: 'circle',
            // maskImage这个是可以自定义背景图片的，词云会按照图片的形状排布，所以有形状限制的时候，最好用背景图来实现，而且，这个背景图一定要放base64的，不然词云画不出来
            // maskImage: '',
            // 下面就是位置的配置
            left: 'center',
            top: 'center',
            width: '80%',
            height: '80%',
            right: null,
            bottom: null,
            // 词的大小，最小12px，最大60px，可以在这个范围调整词的大小
            sizeRange: [8, 32],
            // 每个词旋转的角度范围
            rotationRange: [-90, 90],
            rotationStep: 45,
            // 词间距，数值越小，间距越小，这里间距太小的话，会出现大词把小词套住的情况，比如一个大的口字，中间会有比较大的空隙，这时候他会把一些很小的字放在口字里面，这样的话，鼠标就无法选中里面的那个小字
            gridSize: 8,
            // 允许词太大的时候，超出画布的范围
            drawOutOfBound: false,
            // 布局的时候是否有动画
            layoutAnimation: true,
            // 这是全局的文字样式，相对应的还可以对每个词设置字体样式
            textStyle: {
                fontFamily: 'sans-serif',
                fontWeight: 'bold',
                // 颜色可以用一个函数来返回字符串
                color: function () {
                    // Random color
                    return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')';
                }
            },
            emphasis: {
                focus: 'self',
                textStyle: {
                    textShadowBlur: 10,
                    textShadowColor: '#333'
                }
            },

            // 数据必须是一个数组，数组是对象，对象必须有name和value属性
            data: res.data
        }]
    }
    myChart.setOption(option)
})

$.get('http://127.0.0.1:5000/treemap').then(res => {
    const myChart = echarts.init(document.getElementById('treemap'))
    const option = {
        title: {
            text: '所有图书矩形树图',
            left: 'center'
        },
        tooltip: {
            formatter: function (info) {
                var value = info.value;
                var treePathInfo = info.treePathInfo;
                var treePath = [];
                for (var i = 1; i < treePathInfo.length; i++) {
                    treePath.push(treePathInfo[i].name);
                }
                return [
                    '<div class="tooltip-title">' +
                    echarts.format.encodeHTML(treePath.join('/')) +
                    '</div>',
                    'Disk Usage: ' + echarts.format.addCommas(value) + ' KB'
                ].join('');
            }
        },
        series: [
            {
                name: '全部',
                type: 'treemap',
                visibleMin: 300,
                label: {
                    show: true,
                    formatter: '{b}'
                },
                upperLabel: {
                    show: true,
                    height: 30
                },
                itemStyle: {
                    borderColor: '#fff'
                },
                levels: [
                    {
                        itemStyle: {
                            borderColor: '#777',
                            borderWidth: 0,
                            gapWidth: 1
                        },
                        upperLabel: {
                            show: false
                        }
                    },
                    {
                        itemStyle: {
                            borderColor: '#555',
                            borderWidth: 5,
                            gapWidth: 1
                        },
                        emphasis: {
                            itemStyle: {
                                borderColor: '#ddd'
                            }
                        }
                    },
                    {
                        colorSaturation: [0.35, 0.5],
                        itemStyle: {
                            borderWidth: 5,
                            gapWidth: 1,
                            borderColorSaturation: 0.6
                        }
                    }
                ],
                data: res.data
            }
        ]
    }
    myChart.setOption(option)
})
